<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>表单验证</title>
	<style type="text/css">
		input[type=text],
		input[type=password] {
			width: 150px;
			height: 15px;
		}
	</style>
	<script type="text/javascript">


	</script>
</head>

<body>
	<fieldset style="width: 500px; margin: 0px auto;">
		<b>注册新用户</b>
		<form action="success.html" method="post" onsubmit="return checkAll();">
			<table align="center" width="500" cellpadding="5">
				<tr>
					<td width="30%" align="right">账户:</td>
					<td>
						<input type="text" id="username" onblur="usernameCheck()">
						<span id="usernameSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">密码:</td>
					<td>
						<input type="password" id="password" onblur="passwordCheck()">
						<span id="passwordSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">确认密码:</td>
					<td>
						<input type="password" id="confirm" onblur="confirmCheck()">
						<span id="confirmSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">手机号:</td>
					<td>
						<input type="text" id="phone" onblur="phoneCheck()">
						<span id="phoneSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">学历:</td>
					<td>
						<select id="edu" onchange="stuCheck()">
							<option value="">-请选择学历-</option>
							<option value="bj">本科</option>
							<option value="cd">研究生</option>
							<option value="gz">博士</option>
						</select>
						<span id="eduSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">性别:</td>
					<td>
						<label><input type="radio" name="gender" value="male" onclick="genderCheck()"> 男 </label>
						<label><input type="radio" name="gender" value="female" onclick="genderCheck()"> 女 </label>
						<span id="genderSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="right">兴趣:</td>
					<td>
						<label><input type="checkbox" name="interest" value="somke" onclick="interestCheck()"> 吃饭
						</label>
						<label><input type="checkbox" name="interest" value="drink" onclick="interestCheck()"> 睡觉
						</label>
						<label><input type="checkbox" name="interest" value="tangtou" onclick="interestCheck()"> 打豆豆
						</label>
						<span id="interestSpan"></span>
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input type="submit" value="注册新用户"></td>
				</tr>
			</table>
		</form>
	</fieldset>
	<script>
		function usernameCheck() {
			var username =	document.getElementById("username");
			alert(username)
			var value = username.value;
			alert(value);
			var reg = /^\w{6,30}$/;
			var msg = '';
			if (!value) {
				msg = '用户不能为空';
			} else if (!reg.test(value)) {
				msg = '请输入6-30字母数字_';
			}
			var spans = document.getElementById("usernameSpan");
			spans.innerHTML = msg;

			spans.parentNode.parentNode.style.color = msg == "" ? 'black' : 'red';
			return msg == "";
		}

		function passwordCheck() {
			var values = (document.getElementById('password').value);
			var spans = document.getElementById('passwordSpan');
			var msg = '';
			var regex = /^\w{6,16}$/;
			if (!values) {
				msg = '请输入密码';
			} else if (!regex.test(values)) {
				msg = '请输入6-30位的密码';
			}
			spans.innerHTML = msg;
			spans.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";

		}


		function confirmCheck() {
			var passwords = (document.getElementById('password').value);
			var confirms = (document.getElementById('confirm').valuetrim);
			var spans = document.getElementById('confirmSpan');
			var msg = '';
			if (passwords != confirms) {
				msg = '密码必须一样';
			}
			spans.innerHTML = msg;
			spans.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";

		}

		function phoneCheck() {
			var values =  mytrim(document.getElementById('phone').value);
			var spans = document.getElementById('phoneSpan');
			var msg = '';
			var regex = /^[1](3|4|5|8|7|9)[0-9]{9}$/; 
			if (!values) {
				msg = '';
			} else if (!regex.test(values)) { 
				msg = '请输入正确的手机号';
			}
			spans.innerHTML = msg;
			spans.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";

		}

		function stuCheck() {
			var values = document.getElementById('edu').value;
			var spans = document.getElementById('eduSpan');
			var msg = '';
			if (!values) {
				msg = '请选择';
			}
			spans.innerHTML = msg;
			spans.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";
		}

		function genderCheck() {
			var genderArr = document.getElementsByName("gender"); // »ñÈ¡Ò³ÃæÖÐËùÓÐnameÊôÐÔÎªÖ¸¶¨ÖµµÄÔªËØ
			alert(genderArr[0]);
			var span = document.getElementById("genderSpan");
			var msg = "";
			if (!genderArr[0].checked && !genderArr[1].checked) {
				msg = "必须选择性别";
			}
			span.innerHTML = msg;
			span.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";
		}


		function interestCheck() {
			var interestArr = document.getElementsByName("interest"); 
			var span = document.getElementById("interestSpan");
			var msg = "";
			if (!interestArr[0].checked && !interestArr[1].checked && !interestArr[2].checked) {
				msg = "请至少一个爱好"
			}
			span.innerHTML = msg;
			span.parentNode.parentNode.style.color = msg == "" ? "black" : "red";
			return msg == "";
		}

		

		// 取出左右两侧的空格
		function mytrim(s) {
			var pattern = /^\s+/;
			var pattern = /\s+$/;
			s = s.replace(pattern, '');
			return s;
		}
		function checkAll() {
			var username = usernameCheck();
			var password = passwordCheck();
			var confirm = confirmCheck();
			var phone = phoneCheck();
			var edu = stuCheck()
			var hobby = interestCheck();
			var gender = genderCheck()

			return username && password && confirm & phone & edu & hobby & gender;
		}
	</script>
</body>

</html>